<template>
  <div class="cart-item">
    {{ title }}
    <img :src="img" :alt="title" />
    <!-- onChange('num',$event),num表示是修改的名称，$event是修改的值 -->
    <!-- app爷爷传数据给了cartitem父亲,它的props接受了，:value="num"把cartitem中的数据给了NumberInput，
    然后NumberInput中的数据一发生改变，就会触发change事件，我点相应的按钮或者input框就会触发对应的事件，
    然后传递给onChange($event,'num')中的$event,其实这个里面的num和checked是可以随便写的，它只是一个标记
    的作用 -->
    <number-input :value="num" @change11="onChange($event,'num')"></number-input>
    <!-- 这个cartItem相当于又是mybutton的父组件 -->
    <my-checkbox :value="checked" @change="onChange($event,'checked')"></my-checkbox>
    <my-button @click.native="$emit('delete',$props)">删除</my-button>
  </div>
</template>

<script>
import MyButton from "./MyButton.vue";
import MyCheckbox from "./MyCheckbox.vue";
import NumberInput from "./NumberInput.vue";

export default {
  name: "CartItem",
  components: {
    NumberInput,
    MyCheckbox,
    MyButton,
  },
  props: {
    id: { type: Number, required: true },
    title: { type: String, required: true },
    img: { type: String, required: true },
    price: { type: Number, required: true },
    num: { type: Number, required: true },
    checked: { type: Boolean, required: true },
  },
  methods:{
    onChange($event,propName){
      // 一个解构赋值。这里的[propName]会接受最新的$event值，然后会替换
      // ...this.$props中的旧值会被替换
      // var temp="";
      // if(propName==="a1"){
      //   temp="num"
      // }else if(propName==="a2"){
      //   temp="checked"
      // }
      // ["num"]:$event
      // 传递一个事件change1,...this.$props是表示上面的props中的所有的内容，
      // 然后如果我propName改变的话,改变的哪一项就会替换...this.$props中的内容
      // 然后就把数据传递出去
      this.$emit("change1",{...this.$props,[propName]:$event})

    // {
    //   a:1,
    //   a:2
    // }
    // {a:2}
      // var a="a1"
      // {
      //   [a]:1,
      //   a2:2
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>